{extend name="public/common"}

{block name="style"}
<link rel="stylesheet" href="/index/css/activity/index.css">
<title>毅行达人俱乐部</title>
<meta name="keywords" content="微信二次分享" />
<meta name="description" content="获取微信二次分享描述" />
<style>
    body{
        padding-bottom: 6.4rem;

    }
    .active-item{
        margin: 0;
        border:0;
    }
    .btn-end{
        background-color: #E5E5E5;
        color: #999999;
    }
    .btn-joined{
        box-sizing: border-box;
        background-color: #fff;
        color: #69B9F9;
        border:1px solid #69B9F9;
    }
    .content {
        padding-top: 50px;
        font-size: 1.5rem;
        text-align: center;
        color: #999;
    }
    .content>img {
        width: 100%;
        margin-top: 5rem;
    }
    .no-message {
        display: block;
        margin: 0 auto;
    }
    .btn-box{
        width:100vw;
        position: fixed;
        bottom:-5rem;
        left:0;
        background-color: #fff;
        transition:all 500ms;
    }
    .btn-box-hidden{
        bottom:0;
    }
    .table-row {
        width:92vw;
    }
    .table-row-block > .textarea-box {
        padding: 0 4vw;
    }
    .icon-position{
        display: block;
        width:2rem;
        height:2rem;
        background: url("/index/images/activity/icon-position.png") no-repeat;
        background-size: cover;
    }
    .textarea-box *{
        max-width: 100%;
    }
    .table-row-block-header>span,.table-row-header>span{
        color: #666;
    }
</style>
{/block}

{block name="body"}
<div style=" overflow:hidden; width:0px; height:0; margin:0 auto; position:absolute; top:-800px;"><img src="http://jh.0519ztnet.com/index/images/jh_logo.jpg"></div>
<div id="app">
    <!--<div class="active-item" :style="'background-image: url('+ '/index/images/cbd.jpg' +')'" >-->
        <!--<div class="my-icon-flag my-icon-hot"><span>HOT</span></div>-->
        <!--<div class="active-info">-->
            <!--<div class="active-detail-title"><span v-html="titleWarp('希垦科技园区企业技术经验探讨会')"></span></div>-->
        <!--</div>-->
    <!--</div>-->
    <div v-if="info.status == 0">
        <div class="content">
            <img src="/index/images/activity/icon-default.jpg" class="no-message" >
            <span>活动已取消~</span>
        </div>
    </div>
    <div v-else-if="info.status == -1">
        <div class="content">
            <img src="/index/images/activity/icon-default.jpg" class="no-message" >
            <span>活动已删除~</span>
        </div>
    </div>
    <div v-else>
        <div class="active-item" :style="'background-image: url('+ info.front_cover +')'">
            <div class="my-icon-flag my-icon-hot" v-if="state === 'hot'" ><span>HOT</span></div>
            <div class="my-icon-fillet" v-if="state === 'cancel'"><span>活动已取消</span></div>
            <div class="my-icon-fillet" v-if="state === 'noSignUp'"><span>报名已结束</span></div>
            <div class="my-icon-fillet" v-if="state === 'end'"><span>活动已结束</span></div>
            <div class="my-icon-flag "  v-if="state === 'un'" ><span>预</span></div>
            <!--<div class="active-info">-->
                <!--&lt;!&ndash;<div class="active-detail-title"><span v-html="titleWarp(info.name)"></span></div>&ndash;&gt;-->
            <!--</div>-->
        </div>
        <div class="active-detail-title"><span v-text="info.name"></span></div>
        <div class="table-box">
            <div class="table-row-box">
                <!--<div class="table-row">-->
                    <!--<span class="table-row-header">活动名称：{{info.name}}</span>-->
                <!--</div>-->
                <div class="table-row">
                    <span class="table-row-header"><span>活动时间：</span>{{info.start_time | timeToString}}{{info.end_time - info.start_time >86399?' - ':''}}{{info.end_time - info.start_time >86399?info.end_time:''|timeToString}}</span>
                </div>
                <div class="table-row">
                    <span class="table-row-header"><span>活动地点：</span>{{info.destination_place}}</span>
                    <span><a :href="'http://api.map.baidu.com/geocoder?address='+info.destination_place+'&output=html'" class="icon-position" target='_blank'></a></span>
                </div>
                <div class="table-row">
                    <span class="table-row-header"><span>集合地点：</span>{{info.meeting_place}}</span>
                    <span><a :href="'http://api.map.baidu.com/geocoder?address='+info.meeting_place+'&output=html'" class="icon-position" target='_blank'></a></span>
                </div>
                <div class="table-row">
                    <span class="table-row-header"><span>活动人数：</span>{{count?(count+'/'):''}}{{info.activity_number ? info.activity_number:'不限'}}{{info.remark?'（'+info.remark+'）':''}}</span>
                </div>
                <div class="table-row-block-header"><span>活动介绍：</span></div>
                <div class="table-row-block" style="padding-bottom: 2rem">
                    <div class="textarea-box" v-html="info.activity_description">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-box"  :class="{'btn-box-hidden':isShowBtn}">
            <div class="btn btn-block btn-end" v-if="state === 'cancel'" >活动已取消</div>
            <div class="btn btn-block btn-end" v-else-if="state === 'un'" >活动暂未开始</div>
            <div class="btn btn-block btn-end" v-else-if="state === 'noSignUp'" >报名已结束</div>
            <div class="btn btn-block btn-end" v-else-if="state==='end'" >活动已结束</div>
            <!--<div class="btn btn-block btn-joined" v-else-if="info.is_sign === 'yes'">已报名</div>-->
            <div class="btn btn-block btn-end" v-else-if="info.activity_number && count >= info.activity_number" >人数已满</div>
            <div class="btn btn-block btn-success" @click="jumpTo(info.id)" v-else>我要报名</div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    Vue.filter('timeToString', function(time) {
        if(time){
            if(!isNaN(time)){
                if(String(time).length<13){
                    time = time*1000
                }
                var newTime = new Date(time);
                var m = newTime.getMonth()+1,
                        dt=newTime.getDate(),
                        y=newTime.getFullYear();
                if(dt<10){
                    dt='0'+dt;
                }
                if(m<10){
                    m='0'+m;
                }
                return y+'.'+m+'.'+dt
            }else{
                return time
            }
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            count:{$count},
            info:{$info},
            js_sdk:{$js_sdk},
            interval:'',
            isShowBtn:true
        },
        created(){
            var _this = this;
            if (_this.info.status == 0 || _this.info.status == -1) {
                document.body.style.background = '#f5f5f5';
            }
            document.title =  _this.info.share_title || '毅行达人俱乐部';
            var href = window.location.href,
                    imgHref = window.location.protocol + '//' + window.location.host + '/index/images/jh_logo.jpg',
                    data = _this.js_sdk,
                    desc = _this.info.name;
            console.log(data);
            console.log(desc);
            wx.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']//分享给朋友，分享盆友圈
            });
            wx.onMenuShareTimeline({
                title: _this.info.share_title || '毅行达人俱乐部', // 分享标题
                link: href, // 分享链接
                imgUrl: imgHref, // 分享图标
                success: function () {
                },
                cancel: function () {
                }
            });
            wx.onMenuShareAppMessage({
                title:  _this.info.share_title || '毅行达人俱乐部', // 分享标题
                desc: desc, // 分享描述
                link: href, // 分享链接
                imgUrl: imgHref, // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                },
                cancel: function () {
                },
            })
            wx.ready(function(){

                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });
        },
        mounted(){
            //            头部楼盘表切换按钮定时隐藏，滑动显示
            var _this = this;
            window.onscroll = function(){
                _this.isShowBtn = false;
                if(_this.interval){
                    clearInterval(_this.interval);
                }
                clearInterval(_this.interval);
                _this.interval = setTimeout(function () {
                    _this.isShowBtn = true
                },500)
            };
        },
        computed:{
            state(){
                var status = this.info.status,
                        start = this.info.start_time,
                        end = this.info.end_time;
                if(status == 0){
                    return 'cancel'
                }else if(status ==1){
                    return 'un'
                }
                if(start*1000 > Date.parse(new Date())){
                    if(status == 2){
                        return 'hot'
                    }
                }else {
                    if(Date.parse(new Date()) < end*1000){
                            return 'noSignUp'
                    }else{
                        return 'end'
                    }
                }
            },
        },
        methods: {

            jumpTo(id){
                if(this.info.subscribe===0){
                    window.location.href = '/index/index/code'
                }else{
                    window.location.href = '/index/activity/signUp/activity_id/'+id
                }
            },
            titleWarp(title){
                var title = title;
                if(title){
                    title  =  title.split('');
                    var len = title.length;
                    if(len>12){
                        title[Math.floor(len/2)] += '<br/>';
                        console.log()
                    }
                    title = title.join('')
                }
                return title;
            },
        }
    })
</script>
{/block}